<template>  
  <view class="container">  
    <!-- 用户信息头部 -->  
    <view class="header">  
      <view class="header-left">  
        <image src="../../../../static/user.png" mode="aspectFit" class="avatar" />  
        <view class="user-info">  
			<text class="username">{{userInfo.userName}}</text>
			<br>
			<text class="username">金币：</text>
		   <text class="username">{{userInfo.amount}}</text>
		</view>  
      </view>  
		<button class="logout-button" @tap="logout">退出</button> <!-- 退出按钮 -->
		<button class="set-button" @click="updateUserInfo">设置</button> <!-- 退出按钮 -->
		<button class="set-cz" @click="tocontact">充值</button> <!-- 退出按钮 -->
    </view>  

    <!-- 操作区域 -->  
    <view class="action-area">  
      <button class="action-item" @tap="toPublish">  
        <view class="action-icon">发布推荐号码</view>  
        <image class="arrow-right" src="../../../../static/arrow_right.png" />  
      </button>  
      <button class="action-item" @tap="toHistory">  
        <view class="action-icon">往期推荐号码</view>  
        <image class="arrow-right" src="../../../../static/arrow_right.png" />  
      </button>
	  <button class="action-item" @tap="tocontact">
	    <view class="action-icon">联系我们</view>  
	    <image class="arrow-right" src="../../../../static/arrow_right.png" />  
	  </button>  
	  <button class="action-item" @tap="tocontact">
	    <view class="action-icon">提现</view>  
	    <image class="arrow-right" src="../../../../static/arrow_right.png" />  
	  </button>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return { 
		lc:'0.0',
		phone:'',
		userInfo:{}
    };  
  },  
  onShow() {  
	this.phone = uni.getStorageSync("phone")
	this.getUserInfo()
  },  
  methods: {  
	getUserInfo(){
		this.$myRequest({
		  	method: 'get',
		  	url: '/sysUser/getUserInfoByPhone',
			data:{phone:this.phone}
		  }).then((res) => {
			  if(res.flag){
				   this.userInfo = res.data
			  }
		})
	},
	updateUserInfo(){
		uni.navigateTo({
		  url: '/pages/my/index/mine/updateUserInfo'  
		});  
	},
    toPublish() {  
      uni.navigateTo({  
        url: '/pages/my/index/recommendations'  
      });  
    },  
    toHistory() {  
      uni.navigateTo({  
        url: '/pages/my/index/previous'  
      });  
    },
	tocontact() {
	  uni.navigateTo({  
	    url: '/pages/my/index/contact'  
	  });  
	}, 
    logout() {  
      uni.navigateTo({  
        url: '/pages/login/login'  
      });  
    }  
  },  
};  
</script>  

<style scoped>  
.container {  
  background-color: #f0f0f0; /* 背景颜色 */  
  padding: 20rpx;  
}  

/* 头部样式 */  
.header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  background-color: #742305; /* 修改为金色 */  
  border-radius: 10rpx 10rpx 0 0; /* 顶部圆角，底部直角 */  
  padding: 20rpx;  
  position: relative; /* 使按钮可以绝对定位相对这个容器 */  
}  

.header-left {  
  display: flex;  
  align-items: center;  
}  

.avatar {  
  width: 70rpx;  
  height: 70rpx;  
  border-radius: 35rpx; /* 圆形头像 */  
  margin-right: 15rpx;  
}  

.user-info {  
  margin-left: 10rpx;  
}  

.username {  
  font-size: 26rpx;  
  font-weight: bold;  
  color: #fff8e8;  
}   

.stat-separator {  
  margin: 0 10rpx; /* 分隔符的左右间距 */  
}  

/* 退出按钮样式 */  
.logout-button {  
  position: absolute; /* 使按钮绝对定位 */  
  right: 20rpx; /* 距离右侧的距离 */  
  top: 50%; /* 垂直居中 */  
  transform: translateY(-50%); /* 使按钮在Y轴上居中 */  
  background: transparent;  
  color: #ffffff;  
  font-size: 24rpx;  
  cursor: pointer;  
} 
/* 退出按钮样式 */  
.set-button {  
  position: absolute; /* 使按钮绝对定位 */  
  right: 150rpx; /* 距离右侧的距离 */  
  top: 50%; /* 垂直居中 */  
  transform: translateY(-50%); /* 使按钮在Y轴上居中 */  
  background: transparent;  
  color: #ffffff;  
  font-size: 24rpx;  
  cursor: pointer;  
}
  /* 退出按钮样式 */
  .set-cz {  
    position: absolute; /* 使按钮绝对定位 */  
    right: 250rpx; /* 距离右侧的距离 */  
    top: 50%; /* 垂直居中 */  
    transform: translateY(-50%); /* 使按钮在Y轴上居中 */  
    background: transparent;  
    color: #ffffff;  
    font-size: 24rpx;  
    cursor: pointer;  
  } 

/* 操作区域样式 */  
.action-area {  
  background-color: #ffffff; /* 操作区域背景颜色 */  
  border-radius: 10rpx;  
  padding: 20rpx;  
  margin-top: 15rpx;  
}  

.action-item {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 15rpx 20rpx;  
  border: none; /* 去掉边框 */  
  background: none; /* 去掉背景 */  
}  

.action-icon {  
  font-size: 24rpx;  
  color: #333; /* 操作项字体颜色 */  
}  

.arrow-right {  
  width: 20rpx;  
  height: 20rpx;  
}  
 
</style>